<template>
  <div>
    <h1 ref="Dom">123</h1>
    <router-link to="/home">home</router-link><br />
    <router-link to="/HelloWorld">HelloWorld</router-link>
    <router-view></router-view>
    <button @click="message">点击</button>
    <button @click="clog">我是colog</button>
    <!-- 动态组件is变换 -->
    <component :is="comm"></component>
    <component :is="commm"></component>
  </div>
</template>

<script>
import temixins from './mixins/mixin'
import comm from './components/component'
import commm from './components/componrnttwo'
export default {
  name: 'App',
  mixins: [temixins],
  data() {
    return {
      comm,
      commm,
    }
  },
  // components: {
  //   comm,
  // },
  created() {},
  methods: {
    // 1：切换组件
    change() {
      setTimeout(() => {
        if (this.comm == comm) {
          this.comm = this.commm
          // 2：等待组件dom更新
          this.$nextTick(() => {
            // 3：获取本身dom组件
            console.log(this.$refs.Dom)
            //4:获取子组件的Dom组件
            console.log(this.$children[4].$refs.Demo)
            //5：获取子组件的方法
            this.$children[4].docum()
          })
        } else {
          this.comm = comm
        }
      }, 2000)
    },
  },
  mounted() {
    this.change()
  },
  updated() {
    this.change()
  },
}
</script>

<style>
</style>
